<!-- 发展历程时间轴 -->
<section class="timeline-section section-padding">
    <div class="section-header">
        <h2>大事件时间轴</h2>
        <div class="subtitle">TIMELINE</div>
    </div>
    <div class="timeline-bg">
        <div class="timeline">
            <div class="timeline-item">
                <div class="timeline-year">2014年 — 2018年</div>
                <div class="timeline-dot"></div>
                <div class="timeline-content">
                    <div class="timeline-title">初期探索与基础搭建期</div>
                    <div class="timeline-desc">‌通过核心业务切入市场，早期聚焦餐饮和零售行业，逐步建立服务标准与客户信任。此阶段积累首批合作品牌，奠定后续跨行业服务基础‌。采用轻资产运营策略，通过合作头部企业优化服务流程，形成可复制的服务模型‌。</div>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-year">2018年 — 2021年</div>
                <div class="timeline-dot"></div>
                <div class="timeline-content">
                    <div class="timeline-title">规模化扩张与行业渗透</div>
                    <div class="timeline-desc">依托已验证模式，将业务扩展至15个行业，覆盖餐饮、零售、消费品、科技、健康等多个领域，逐步形成多行业的企业服务体系，并且包含多个行业的头部企业和品牌。</div>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-year">2021年 — 2025年</div>
                <div class="timeline-dot"></div>
                <div class="timeline-content">
                    <div class="timeline-title">资本合作与商业生态构建</div>
                    <div class="timeline-desc">通过不断引入‌投资机构、企业管理服务、新媒体、科技服务公司资源，甄成集团的企业价值链赋能平台已经搭建形成。目前40余家资本方（创投机构、产投基金、银行、证券公司），50余家企业专业服务机构（培训公司、咨询公司、科技服务公司）、20多个政府平台等建立深度合作关系，推动服务规模扩大与体量增长‌‌，为企业提供全生态的服务。</div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
.timeline-bg {
    width: 100%;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    background: #fff;
    overflow-x: hidden;
}
.timeline {
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 1;
    padding: 0 1.25rem;
}
.timeline-item {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding-bottom: 6rem;
}
.timeline-year {
    width: 20.625rem;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 3rem;
    color: #19191f;
}
.timeline-dot {
    margin-top: 0.6875rem;
    width: 1.9375rem;
    height: 1.9375rem;
    border-radius: 50%;
    border: 0.25rem solid #E0E0E0;
    background: #fff;
    box-sizing: border-box;
    position: relative;
    flex-shrink: 0;
}
.timeline-dot::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 1.0625rem;
    height: 1.0625rem;
    background: #0E78FF;
    border-radius: 50%;
    display: block;
}
.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 21.625rem;
    top: 2.625rem;
    width: 0;
    height: calc(100% - 1.9375rem);
    border-left: 0.15625rem solid #E5E5E5;
    z-index: 1;
}
.timeline-content {
    padding-left: 5rem;
    flex: 1;
}
.timeline-title {
    font-weight: 400;
    font-size: 2rem;
    line-height: 3rem;
    color: #181b31;
    margin-bottom: 1.8rem;
}
.timeline-desc {
    font-family: "Microsoft YaHei";
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 2rem;
    color: #666;
}


/* 大屏幕适配 */
@media (max-width: 1440px) {
    .timeline { 
        max-width: 75rem;
        padding: 0 2.5rem;
    }
    .timeline-year { 
        width: 17.5rem;
        font-size: 1.625rem;
    }
    .timeline-dot {
        width: 1.75rem;
        height: 1.75rem;
        border-width: 0.1875rem;
    }
    .timeline-dot::after {
        width: 0.875rem;
        height: 0.875rem;
    }
    .timeline-title {
        font-size: 2.25rem;
        line-height: 3rem;
    }
    .timeline-desc {
        font-size: 1.25rem;
        line-height: 2rem;
    }
    .timeline-item:not(:last-child)::before {
        left: 21.625rem;
        top: 2.625rem;
        height: calc(100% - 2.625rem);
        border-left-width: 0.125rem;
    }
}

/* 平板适配 */
@media (max-width: 1024px) {
    .timeline { 
        padding: 0 1.875rem;
    }
    .timeline-item { 
        flex-direction: column;
        align-items: flex-start;
        min-height: auto;
        padding-bottom: 3.75rem;
    }
    .timeline-year { 
        width: 100%;
        font-size: 1.5rem;
        margin-bottom: 0.9375rem;
    }
    .timeline-dot {
        width: 1.5rem;
        height: 1.5rem;
        border-width: 0.1875rem;
        margin: 0 0 0.9375rem 0;
    }
    .timeline-dot::after {
        width: 0.75rem;
        height: 0.75rem;
    }
    .timeline-content { 
        padding-left: 0;
    }
    .timeline-item:not(:last-child)::before {
        left: 0.75rem;
        top: 2.1875rem;
        height: calc(100% - 2.1875rem);
        border-left-width: 0.125rem;
    }
    .timeline-title {
        font-size: 2rem;
        line-height: 2.625rem;
        margin-bottom: 1.25rem;
    }
    .timeline-desc {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

/* 手机适配 */
@media (max-width: 768px) {
    .timeline { 
        padding: 0 1.25rem;
    }
    .timeline-item { 
        padding-bottom: 2.5rem;
        position: relative;
    }
    .timeline-year { 
        font-size: 1.25rem;
        line-height: 1.75rem;
        margin-bottom: 0.75rem;
        color: #0E78FF;
        font-weight: 500;
    }
    .timeline-dot {
        width: 1.25rem;
        height: 1.25rem;
        border-width: 0.125rem;
        margin: 0 0 0.75rem 0;
        box-shadow: 0 0 0 0.25rem rgba(14, 120, 255, 0.1);
    }
    .timeline-dot::after {
        width: 0.625rem;
        height: 0.625rem;
        background: #0E78FF;
        box-shadow: 0 0 0.5rem rgba(14, 120, 255, 0.3);
    }
    .timeline-title {
        font-size: 1.375rem;
        line-height: 1.875rem;
        margin-bottom: 0.75rem;
        color: #232733;
        font-weight: 500;
    }
    .timeline-desc {
        font-size: 0.9375rem;
        line-height: 1.5rem;
        color: #666;
    }
    .section-header {
        padding: 0 0.9375rem;
        margin-bottom: 1.875rem;
    }
    .section-header h2 {
        font-size: 1.75rem;
        margin-bottom: 0.5rem;
    }
    .section-header .subtitle {
        font-size: 0.9375rem;
        margin-bottom: 1.5625rem;
    }
    .timeline-item:not(:last-child)::before {
        left: 0.625rem;
        top: 2rem;
        height: calc(100% - 2rem);
        border-left-width: 0.09375rem;
        border-left-color: rgba(14, 120, 255, 0.2);
    }
}

/* 小屏手机适配 */
@media (max-width: 480px) {
    .timeline { 
        padding: 0 0.9375rem;
    }
    .timeline-item { 
        padding-bottom: 2.1875rem;
    }
    .timeline-year { 
        font-size: 1.125rem;
        line-height: 1.5rem;
        margin-bottom: 0.625rem;
    }
    .timeline-dot {
        width: 1rem;
        height: 1rem;
        border-width: 0.125rem;
        margin: 0 0 0.625rem 0;
        box-shadow: 0 0 0 0.1875rem rgba(14, 120, 255, 0.1);
    }
    .timeline-dot::after {
        width: 0.5rem;
        height: 0.5rem;
        box-shadow: 0 0 0.375rem rgba(14, 120, 255, 0.3);
    }
    .timeline-title {
        font-size: 1.25rem;
        line-height: 1.75rem;
        margin-bottom: 0.625rem;
    }
    .timeline-desc {
        font-size: 0.875rem;
        line-height: 1.375rem;
    }
    .section-header {
        padding: 0 0.625rem;
        margin-bottom: 1.5625rem;
    }
    .section-header h2 {
        font-size: 1.5rem;
        margin-bottom: 0.375rem;
    }
    .section-header .subtitle {
        font-size: 0.875rem;
        margin-bottom: 1.25rem;
    }
    .timeline-item:not(:last-child)::before {
        left: 0.5rem;
        top: 1.625rem;
        height: calc(100% - 1.625rem);
        border-left-width: 0.0625rem;
        border-left-color: rgba(14, 120, 255, 0.15);
    }
}

/* 超小屏手机适配 */
@media (max-width: 360px) {
    .timeline { 
        padding: 0 0.75rem;
    }
    .timeline-item { 
        padding-bottom: 1.875rem;
    }
    .timeline-year { 
        font-size: 1rem;
        line-height: 1.375rem;
    }
    .timeline-dot {
        width: 0.875rem;
        height: 0.875rem;
        border-width: 0.09375rem;
        margin: 0 0 0.5rem 0;
        box-shadow: 0 0 0 0.125rem rgba(14, 120, 255, 0.1);
    }
    .timeline-dot::after {
        width: 0.4375rem;
        height: 0.4375rem;
        box-shadow: 0 0 0.25rem rgba(14, 120, 255, 0.3);
    }
    .timeline-title {
        font-size: 1.125rem;
        line-height: 1.625rem;
    }
    .timeline-desc {
        font-size: 0.8125rem;
        line-height: 1.25rem;
    }
    .section-header h2 {
        font-size: 1.375rem;
    }
    .section-header .subtitle {
        font-size: 0.8125rem;
    }
    .timeline-item:not(:last-child)::before {
        left: 0.4375rem;
        top: 1.375rem;
        height: calc(100% - 1.375rem);
        border-left-width: 0.0625rem;
        border-left-color: rgba(14, 120, 255, 0.1);
    }
}
</style> 